Utilities for creating exit animations.
| Class | Properties |
|---|---|
animate-out |
animation-name: exit;animation-duration: 150ms;--tw-exit-opacity: initial;--tw-exit-scale: initial;--tw-exit-translate-x: initial;--tw-exit-translate-y: initial; |
To give an element an exit animation, use the animate-out utility, in combination with some fade-out, spin-out, zoom-out, and slide-out-from utilities.
<button class="animate-out fade-out ...">Button A</button>
<button class="animate-out spin-out ...">Button B</button>
<button class="animate-out zoom-out ...">Button C</button>
<button class="animate-out slide-out-from-top ...">Button D</button>
<button class="animate-out slide-out-from-left ...">Button E</button>You can apply multiple exit animations at the same time as long as they apply to different properties.
<button class="animate-out fade-out zoom-out ...">Button A</button>
<button class="animate-out slide-out-from-top slide-out-from-left ...">
Button B
</button>
<button
class="animate-out fade-out zoom-out slide-out-from-top slide-out-from-left ..."
>
Button C
</button>Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:animate-out to only apply the animate-out utility on hover.
<div class="hover:animate-out ...">
<!-- ... -->
</div>For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:animate-out to apply the animate-out utility at only medium screen sizes and above.
<div class="md:animate-out ...">
<!-- ... -->
</div>To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.